<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .table-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-top: 20px;
            overflow: hidden;
        }

        .table {
            table-layout: fixed; /* 固定表格布局 */
            width: 100%;
            margin-bottom: 0;
        }

        .table th, .table td {
            padding: 12px 15px;
            vertical-align: middle;
            word-wrap: break-word; /* 长文本自动换行 */
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            text-align: center;
        }

        .table td {
            text-align: center;
        }

        /* 列宽分配 */
        .table th:nth-child(1), .table td:nth-child(1) { width: 10%; } /* ID */
        .table th:nth-child(2), .table td:nth-child(2) { width: 25%; } /* 账号 */
        .table th:nth-child(3), .table td:nth-child(3) { width: 25%; } /* 密码 */
        .table th:nth-child(4), .table td:nth-child(4) { width: 20%; } /* 角色 */
        .table th:nth-child(5), .table td:nth-child(5) { width: 20%; } /* 操作 */

        .action-btns {
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .action-btn {
            white-space: nowrap;
        }

        .badge {
            font-size: 0.85em;
            padding: 5px 10px;
            border-radius: 50px;
        }

        .add-user-btn {
            padding: 8px 16px;
            font-weight: 500;
        }
    </style>
</head>
<body class="bg-light">
<div class="container py-4">
    <%@include file="top.jsp"%>

    <div class="d-flex justify-content-between align-items-center mb-4">

        <form action="${pageContext.request.contextPath}/users/search" method="get" class="row g-3 align-items-center">
            <div class="col-auto">
                <input type="text" name="usernumber" class="form-control form-control-sm"
                       placeholder="账号搜索" value="${param.usernumber}">
            </div>
            <div class="col-auto">
                <select name="usertype" class="form-select form-select-sm">
                    <option value="">所有角色</option>
                    <option value="admin" ${param.usertype == 'admin' ? 'selected' : ''}>管理员</option>
                    <option value="volunteer" ${param.usertype == 'volunteer' ? 'selected' : ''}>志愿者</option>
                    <option value="organization" ${param.usertype == 'organization' ? 'selected' : ''}>机构</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-search"></i> 搜索
                </button>
                <a href="${pageContext.request.contextPath}/users/list" class="btn btn-outline-secondary btn-sm ms-2">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </a>
            </div>
        </form>



        <a href="${pageContext.request.contextPath}/users/add" class="btn btn-primary add-user-btn">
            <i class="bi bi-plus-circle me-1"></i> 添加用户
        </a>
    </div>

    <div class="table-container">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>账号</th>
                <th>密码</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${users}" var="users">
                <tr>
                    <td>${users.userid}</td>
                    <td>${users.usernumber}</td>
                    <td>${users.password}</td>
                    <td>
                        <c:choose>
                            <c:when test="${users.usertype == 'admin'}">
                                <span class="badge bg-danger">管理员</span>
                            </c:when>
                            <c:when test="${users.usertype == 'volunteer'}">
                                <span class="badge bg-primary">志愿者</span>
                            </c:when>
                            <c:when test="${users.usertype == 'organization'}">
                                <span class="badge bg-success">机构</span>
                            </c:when>
                            <c:otherwise>
                                <span class="badge bg-secondary">${users.usertype}</span>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td>
                        <div class="action-btns">
                            <a href="${pageContext.request.contextPath}/users/edit/${users.userid}"
                               class="btn btn-sm btn-warning action-btn">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                            <a href="${pageContext.request.contextPath}/users/delete/${users.userid}"
                               class="btn btn-sm btn-danger action-btn"
                               onclick="return confirm('确定要删除此用户吗？')">
                                <i class="bi bi-trash"></i> 删除
                            </a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>